import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import _isEmpty from 'lodash/isEmpty'
import { View, Input, Text } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { generateQueryString } from '../../utils/index'
import './index.scss'

class AddressBookItem extends Component {

	static propTypes = {
		id: PropTypes.number,
		data: PropTypes.object,
		onClick: PropTypes.func,
		onEdit: PropTypes.func,
		onDelete: PropTypes.func,
	}

	static defaultProps = {
		data: {},
	}

	render(){
		const { data } = this.props
		return(
			<View
				className="addressbook-item"
				hoverClass="hover-bg"
				onClick={this.onClick}
			>
				{!_isEmpty(data) && <View className="item-detail">
					{data.linkman && <View className="name-first">{data.linkman.substring(0, 1)}</View>}
					<View className="item-detail-box">
						<View className="name-phone">
							<View className="name">{data.linkman}</View>
							<View className="phone">{data.mobile}</View>
						</View>
						<View className="address-detail">
							<Text>{data.provinceCn||''}{data.cityCn||''}{data.districtCn || ''}{data.address||''}</Text>
						</View>
					</View>
				</View>}
				<View className="addressbook-operation">
					<View
						className="operation edit"
						hoverClass="base-hover"
						onClick={(e) => {
							e.stopPropagation()
							Taro.navigateTo({
								url: `/pages/addresscreate/index?type=edit&aid=${data.id}`
							})
						}}
					>
						<AtIcon value="edit" size="13" color="#8A8989"></AtIcon>
						<Text className="operation-text">编辑</Text>
					</View>
					<View
						className="operation delete"
						hoverClass="base-hover"
						onClick={this.handleDelAddress}
					>
						<AtIcon value="trash" size="13" color="#8A8989"></AtIcon>
						<Text className="operation-text" onClick={this.onDelete}>删除</Text>
					</View>
				</View>
			</View>
		)
	}

	onClick = () => {
		const { onClick } = this.props
		onClick && onClick()
	}

	onEdit = () => {
		const { onEdit } = this.props
		onEdit && onEdit()
	}

	onDelete = () => {
		const { onDelete } = this.props
		onDelete && onDelete()
	}
	
	handleDelAddress = (e) => {
		e.stopPropagation()
		const { data } = this.props
		console.log('删除==', data)
	}
}

export default AddressBookItem